<template>
	<view class="bg">
		<page-meta root-font-size="50px"></page-meta>	
		<view id="bindundun" >
			<view :class="[showList[index]?showList[index]:'']" class="hBox" v-for="(i,index) in cssList">
			</view>
		</view>
		<view class="codeBox">
			<view class="codeBoxItem" v-for="i in showList">
				<view>添加</view>
				<text>{{i}}</text>
				<view>节点...</view>
			</view>
			<view class="codeBoxItem" v-if="showList.length == cssList.length">
				<text>完成！</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showList: [],
				cssList: [
					'body',
					'ear',
					'ear right_ear',
					'face_1',
					'face_2',
					'face_3',
					'face_4',
					'face_5',
					'left_hand',
					'right_hand',
					'left_foot',
					'right_foot',
					'left_eye',
					'right_eye',
					'mouth',
					'nose',
					'logo',
					'like',
				]
			}
		},
		onLoad() {
			this.open()
		},
		methods: {
			async open() {
				for (let i of this.cssList) {
					await this.timeStop()
					this.showList = [...this.showList, i]
				}
			},
			timeStop() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve()
					}, 500)
				})
			},
		}
	}
</script>
<style lang="scss">
	.bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		width: 100%;
		height: 100%;

	}

	.codeBox {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		.successBox{
			font-size: 20px;
			font-weight: bold;
			color: #07c0ef;
			text-align: center;
		}
		.codeBoxItem {
			display: flex;
			align-items: center;
			view{
				font-size: 12px;
				color: #999;
			}
			text{
				margin: 0 5rpx;
				font-size: 12px;
				color: #07c0ef;
				font-weight: bold;
			}
		}
	}

	.hBox {
		transition: 0.5s;

	}

	#bindundun {

		transform: scale(1);
		position: relative;
		height: 3.4rem;
		width: 3rem;
		margin-top: 300rpx;
	}

	.body {
		border: 0.06rem solid #000;
		height: 100%;
		width: 100%;
		position: absolute;
		border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 1;
	}

	.ear {
		width: .9rem;
		height: 1.2rem;
		position: absolute;
		top: 0;
		left: .2rem;
		border: 0.06rem solid #000;
		border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;
		background: #000;
		z-index: 0;
		transform: rotate(-20deg);
	}

	.right_ear {
		right: .2rem;
		left: auto;
		transform: rotateY(180deg) rotate(-20deg);
	}

	.face_1 {
		width: 2.2rem;
		height: 1.7rem;
		border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
		border: 0.05rem solid #1c1f00;
		position: absolute;
		top: .45rem;
		left: .4rem;
		z-index: 1;
	}

	.face_2 {
		width: 2.28rem;
		height: 1.78rem;
		border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
		border: 0.04rem solid #335fe6;
		position: absolute;
		top: .41rem;
		left: .36rem;
		z-index: 1;
	}

	.face_3 {
		width: 2.34rem;
		height: 1.84rem;
		border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
		border: 0.03rem solid #ee39d3;
		position: absolute;
		top: .38rem;
		left: .33rem;
		z-index: 1;
	}

	.face_4 {
		width: 2.38rem;
		height: 1.86rem;
		border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
		border: 0.02rem solid #edf466;
		position: absolute;
		top: .36rem;
		left: .31rem;
		z-index: 1;
	}

	.face_5 {
		width: 2.4rem;
		height: 1.88rem;
		border-radius: 60% 60% 50% 50% / 70% 70% 48% 48%;
		border: 0.02rem solid #6cf078;
		position: absolute;
		top: .34rem;
		left: .29rem;
		z-index: 1;
	}

	.left_hand {
		position: absolute;
		z-index: 0;
		width: .8rem;
		height: 1.3rem;
		border-radius: 50%;
		background: #000;
		top: 1rem;
		left: -.5rem;
		transform: rotate(-15deg);
	}

	.left_hand:after {
		position: absolute;
		content: '';
		width: 1.3rem;
		height: .8rem;
		background: #000;
		border-radius: 50%;
		transform: rotate(35deg);
		top: 0.71rem;
	}

	.right_hand {
		position: absolute;
		z-index: 0;
		height: .8rem;
		width: .8rem;
		border-radius: 50%;
		background: #000;
		right: -.5rem;
		top: 2.2rem;
	}

	.right_hand:after {
		position: absolute;
		background: #000;
		width: 0.8rem;
		height: 0.8rem;
		top: -0.24rem;
		left: -0.26rem;
		content: '';
		transform: rotate(-47deg);
		border-radius: 0 0 0 80%;
	}

	.left_foot {
		position: absolute;
		background: #000;
		width: .9rem;
		height: .9rem;
		top: 3rem;
		left: .3rem;
		border-radius: 50%;
	}

	.left_foot:after {
		position: absolute;
		z-index: 0;
		height: .9rem;
		width: .9rem;
		content: '';
		background: #000;
		top: -0.45rem;
		transform: rotate(12deg);
		left: 0.1rem;
		border-radius: 0 50% 50% 0;
	}

	.right_foot {
		position: absolute;
		background: #000;
		width: .9rem;
		height: .9rem;
		top: 3rem;
		right: .3rem;
		border-radius: 50%;
	}

	.right_foot:after {
		position: absolute;
		z-index: 0;
		height: .9rem;
		width: .9rem;
		content: '';
		background: #000;
		top: -0.45rem;
		transform: rotate(-12deg);
		right: 0.1rem;
		border-radius: 0 0 0 50%;
	}

	.left_eye {
		position: absolute;
		width: 0.6rem;
		height: .8rem;
		top: 0.8rem;
		left: 0.65rem;
		background: #000;
		z-index: 2;
		border-radius: 50%;
		transform: rotate(45deg);
	}

	.left_eye:after,
	.right_eye:after {
		position: absolute;
		width: .3rem;
		height: .3rem;
		border: .03rem solid #fff;
		border-radius: 50%;
		content: '';
		top: .1rem;
		left: .15rem;
	}

	.right_eye:after {
		left: auto;
		right: .15rem;
	}

	.left_eye:before,
	.right_eye:before {
		top: .23rem;
		left: .22rem;
		position: absolute;
		width: .1rem;
		height: .1rem;
		background: #fff;
		border-radius: 50%;
		content: '';
	}

	.right_eye:before {
		left: 0.22rem;
		top: 0.18rem;
	}

	.right_eye {
		position: absolute;
		width: 0.6rem;
		height: .8rem;
		top: 0.8rem;
		right: 0.65rem;
		background: #000;
		z-index: 2;
		border-radius: 50%;
		transform: rotate(-45deg);
	}

	.mouth {
		border: 0.05rem solid #000;
		position: absolute;
		top: 1.3rem;
		width: 1rem;
		height: 0.5rem;
		z-index: 1;
		left: 50%;
		margin-left: -0.5rem;
		border-radius: 0 0 50% 50% / 0 0 100% 100%;
		border-top: none;
	}

	.mouth:after,
	.mouth:before {
		position: absolute;
		content: '';
		width: .5rem;
		background: #fff;
		height: 0.5rem;
		top: -0.15rem;
		transform: rotate(45deg);
	}

	.mouth:after {
		left: -0.21rem;
	}

	.mouth:before {
		right: -0.21rem;
	}

	.mouth_dot {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.mouth_dot:after,
	.mouth_dot:before {
		position: absolute;
		top: .333rem;
		width: 0.05rem;
		height: 0.05rem;
		border-radius: 50%;
		background: #000;
		content: '';
	}

	.mouth_dot:after {
		left: .113rem;
	}

	.mouth_dot:before {
		right: .113rem;
	}

	.nose {
		background: #000;
		width: .3rem;
		height: .3rem;
		position: absolute;
		left: 50%;
		margin-left: -0.15rem;
		top: 1.25rem;
		z-index: 1;
		transform: rotate(50deg) skewY(-10deg);
		border-radius: 30%;
	}

	.nose:after {
		width: 0.352rem;
		height: 0.36rem;
		position: absolute;
		content: '';
		border-radius: 50%;
		border-top: 0.1rem solid #fff;
		top: -0.07rem;
		transform: rotate(-45deg) skewY(0deg);
		left: -0.017rem;
	}

	.like {
		width: .5rem;
		height: .5rem;
		position: absolute;
		top: 1.25rem;
		left: -.32rem;
		z-index: 2;
	}

	.like:before,
	.like:after {
		content: "";
		position: absolute;
		width: .12rem;
		height: .2rem;
		background-color: red;
		border-radius: .2rem .2rem 0 0;
		top: 0;
	}

	.like:before {
		transform: rotate(-45deg);
		left: 0;
	}

	.like:after {
		transform: rotate(45deg);
		right: .32rem;
	}

	.logo {
		background-image: url(../../static/dongao.png);
		background-repeat: no-repeat;
		width: .5rem;
		position: absolute;
		height: .8rem;
		z-index: 2;
		background-size: contain;
		top: 2.45rem;
		left: 50%;
		margin-left: -0.25rem;
	}
</style>
